<template>
  <div class="wrap">
      <el-form :inline="true" :model="form">
          <el-form-item label="告警级别：">
              <el-select v-model="form.level" @change="getTableData">
                  <el-option v-for="item in warnLevel" :key="item.value" :label="item.name" :value="item.value"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item style="float:right;position: relative;">
                <el-input
                    v-model="form.kw"
                    placeholder="请输入查询条件"
                ></el-input>
                <i class="el-icon-search" @click="getTableData"></i>
            </el-form-item>
      </el-form>
      <el-table :data="tableData" height='calc(100vh - 405px)' v-loading='loading'>
          <el-table-column type="selection" width="60"></el-table-column>
          <el-table-column label="告警级别" sortable align="center">
              <template slot-scope="scope">
                  {{getWarnLevel(scope.row.warNo)}}
              </template>
          </el-table-column>
          <el-table-column label="告警ID" sortable prop="warId" align="center"></el-table-column>
          <el-table-column label="告警名称" sortable prop="warName" align="center"></el-table-column>
          <el-table-column label="告警描述" sortable prop="warMs" align="center"></el-table-column>
          <el-table-column label="设备名称" sortable align="center">
              <template slot-scope="scope">
                  <el-button type="text" @click="openDalog(scope.row.baseId)">{{scope.row.sbmc}}</el-button>
              </template>
          </el-table-column>
          <el-table-column label="告警状态" sortable prop="warStatus" align="center"></el-table-column>
          <el-table-column label="生产时间" sortable prop="createTime" align="center"></el-table-column>
      </el-table>
        <div class="pagination">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
  </div>
</template>

<script>
import {getAction, postAction} from '@/api/manage';
export default {
    props:['total'],
    data() {
        return {
            form: {
                kw: '',
                level: '1'
            },
            tableData: [],
            warnLevel: [
                {value:'1', name:'全部告警'},
                {value:'2', name:'警告告警'},
                {value:'3', name:'次要告警'},
                {value:'4', name:'重要告警'},
                {value:'5', name:'紧急告警'}
            ],
            pageSize: 10,
            currentPage: 1,
            loading: false
        }
    },
    mounted() {
        this.getTableData();
    },
    methods: {
        // 点击设备名称
        openDalog(n){
            this.$parent.baseId = n;
            this.$parent.getEquipmentdetail();
        },
        // 获取table数据
        getTableData(){
            let baseInfo = {};
            if(this.form.kw != ''){
                baseInfo.sbmc = this.form.kw;
            }
            if(this.form.level != ''){
                baseInfo.warNo = this.form.level;
            }
            this.loading = true;
            postAction(`/sys/getAllBaseInfo/${this.currentPage}/${this.pageSize}`, baseInfo).then(res=>{
                this.tableData = res.baseInfo.records;
                this.$parent.total = res.baseInfo.total;
                this.loading = false;
            })
        },
        // 获取其告警级别
        getWarnLevel(value){
            let res = ''
            this.warnLevel.forEach(item=>{
                if(value == item.value){
                    res = item.name;
                }
            });
            return res;
        },
        // 分页方法
        handleSizeChange(e){
            this.pageSize = e;
            this.getTableData();
        },
        handleCurrentChange(e){
            this.currentPage = e;
            this.getTableData();
        },
    },
}
</script>

<style scoped>
.el-table /deep/ .el-table__header tr th{
    background-color: #EFEEEC;
    color: #282A29;
}
.wrap{
    position: relative;
    margin-top: 10px;
    background-color: #fff;
    padding: 20px;
}
.wrap .el-table{
    margin-bottom: 35px;
}
.pagination{
    position: absolute;
    right: 20px;
    bottom: 8px;
}
.el-form .el-form-item__content .el-input{
    width: 240px;
}
.el-icon-search{
    width: 38px;
    height: 39px;
    display: inline-block;
    text-align: center;
    border: 1px solid #2F70E6;
    border-radius: 0 5px 5px 0;
    line-height: 38px;
    color: #fff;
    font-weight: bold;
    background-color: #2F70E6;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}
</style>